import React, { PureComponent } from 'react'
import { renderRoutes } from 'react-router-config'

import routes from './router'

import {
  Link,
  NavLink,
  Route,
  Switch,
  withRouter
} from 'react-router-dom'

import './App.css'


import About from './pages/about'
import Home from './pages/home'
import Login from './pages/login'
import NoMatch from './pages/noMatch'
import Product from './pages/product'
import Profile from './pages/profile'
import User from './pages/user'
import Detail from './pages/detail'
import Detail2 from './pages/detail2'
import Detail3 from './pages/detail3'

class App extends PureComponent {
  render() {
    const id = 'a'
    const info = {id: 1, name: 'll', age: 14}

    return (
      <div>
        {/* <Link to="/">Home</Link> | 
        <Link to="/about">About</Link> | 
        <Link to="/profile">Profile</Link> */}

        {/* <NavLink to="/" exact activeStyle={{color: 'red'}}>Home</NavLink> | 
        <NavLink to="/about" activeStyle={{color: 'red'}}>About</NavLink> | 
        <NavLink to="/profile" activeStyle={{color: 'red'}}>Profile</NavLink> */}

        <NavLink to="/" exact activeClassName="link-active">Home</NavLink> | 
        <NavLink to="/about" activeClassName="link-active">About</NavLink> | 
        <NavLink to="/profile" activeClassName="link-active">Profile</NavLink> | 
        <NavLink to="/abc" activeClassName="link-active">Abc</NavLink> | 
        <NavLink to="/user" activeClassName="link-active">User</NavLink> | 
        <NavLink to={`/detail/${id}`} activeClassName="link-active">Detail</NavLink>
        <NavLink to={`/detail2?name=a`} activeClassName="link-active">Detail2</NavLink>
        <NavLink to={{pathname: '/detail3', state: info}} activeClassName="link-active">Detail3</NavLink>
        <button onClick={ e => this.jumpProduct() }>Product</button>

        {/* <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/profile" component={Profile} />
        <Route path="/:id" component={User} />
        <Route component={NoMatch}/> */}

        {/* <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/profile" component={Profile} />
          <Route path="/:id" component={User} />
          <Route path="/user" component={User} />
          <Route path="/login" component={Login} />
          <Route path="/product" component={Product} />
          <Route path="/detail/:id" component={Detail} />
          <Route path="/detail2" component={Detail2} />
          <Route path="/detail3" component={Detail3} />
          <Route component={NoMatch}/>
        </Switch> */}
        {renderRoutes(routes)}
      </div>
    )
  }

  jumpProduct() {
    this.props.history.push('/product')
  }
}

export default withRouter(App)